<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" content="">
		<title>core - selection.classed(name[, value])</title>
		<style type="text/css">
			.even{
				fill:purple;			
			}
			.odd{
				fill:tomato;
			}
			.stroke{
				stroke:deepskyblue;
				stroke-width:5;
			}
			.opacity{
				opacity:0.5;
			}
		</style>
		<script type="text/javascript" src="../../d3.js"></script>
	</head>
	<body>	
		<svg></svg>
		<script type="text/javascript">
			//绘制矩形的数据
			var dataset = [ 5, 10, 15, 20, 25 ];  
			
			//创建矩形
			rects=d3.select("svg").selectAll("rect")
					.data(dataset)
					.enter()
					.append("rect")
					.attr({
						"x":function(d,i){ return 20+i*160/dataset.length;},
						"y":function(d){ return 20;},
						"width":20,
						"height":100
					});
			
			//使用函数值绑定元素的CSS类
			rects.classed({
				"odd":function(d,i){ return i%2==0?true:false;},
				"even":function(d,i){ return i%2==0?false:true;}
			});
					
			//切换矩形的CSS类		
			rects.on("click",function(){
				var rect=d3.select(this);
				if(rect.classed("stroke opacity")){	//取得元素是否绑定指定名称的CSS类
					rect.classed("stroke opacity",false);	//移除元素绑定的CSS类
				}else{
					rect.classed("stroke opacity",true);	//给元素绑定CSS类，可以绑定多个类
				}
			});
			
		</script>
	</body>
</html>